import { Button, Table, Tabs, TabsProps } from "antd";
import { useForm } from "antd/es/form/Form";
import "./index.css";
import { useEffect, useState } from "react";
import { ColumnsType } from "antd/es/table";
import { acceptListserver, sendListserver } from "@/servers/friendshipServer";

interface User {
	headPic: string;
	nickName: string;
	email: string;
	username: string;
}

interface SendType {
	id: number;
	fromUserId: number;
	toUserId: number;
	reason: string;
	status: number;
	createTime: Date;
	sendUserInfo: User;
}

interface AcceptType {
	id: number;
	fromUserId: number;
	toUserId: number;
	status: number;
	reason: string;
	createTime: Date;
	fromUserInfo: User;
}

export default function Notification() {
	const [form] = useForm();
	const [accept, setAccept] = useState<Array<AcceptType>>([]);
	const [send, setSend] = useState<Array<SendType>>([]);

	const acceptList = async () => {
		const res = await acceptListserver();
		const { code, data } = res.data;
		if (code === 200 || code === 201) {
			setAccept(data);
		}
	};

	const sendList = async () => {
		const res = await sendListserver();
		const { code, data } = res.data;
		if (code === 200 || code === 201) {
			setSend(data);
		}
	};

	useEffect(() => {
		acceptList();
		sendList();
	}, []);

	const onChange = (key: string) => {
		console.log(key);
	};

	const toMeColumns: ColumnsType<SendType> = [
		{
			title: "用户",
			render: (_, record) => {
				return (
					<div>
						<img
							src={
								record.sendUserInfo.headPic ||
								"https://ly-sys-image.oss-cn-beijing.aliyuncs.com/img/uploads/api/202405/c85845b91827f1006506a3b821639893.png"
							}
							width={30}
							height={30}
						/>
						{" 请求添加好友 " + record.sendUserInfo.nickName}
					</div>
				);
			},
		},

		{
			title: "请求时间",
			render: (_, record) => {
				return new Date(record.createTime).toLocaleString();
			},
		},
		{
			title: "状态",
			render: (_, record) => {
				const map: Record<string, any> = {
					0: "申请中",
					1: "已通过",
					2: "已拒绝",
				};
				return <div>{map[record.status]}</div>;
			},
		},
	];

	const fromMeColumns: ColumnsType<AcceptType> = [
		{
			title: "用户",
			render: (_, record) => {
				return (
					<div>
						{" " + record.fromUserInfo.nickName + " 请求加你为好友"}
						<img
							src={
								record.fromUserInfo.headPic ||
								"https://ly-sys-image.oss-cn-beijing.aliyuncs.com/img/uploads/api/202405/c85845b91827f1006506a3b821639893.png"
							}
							width={30}
							height={30}
						/>
					</div>
				);
			},
		},

		{
			title: "请求时间",
			render: (_, record) => {
				return new Date(record.createTime).toLocaleString();
			},
		},

		{
			title: "操作",
			render: (_, record) =>
				record.status === 0 ? (
					<div>
						<Button>同意</Button>
						<Button>拒绝</Button>
					</div>
				) : (
					<div>已同意</div>
				),
		},
	];

	const items: TabsProps["items"] = [
		{
			key: "1",
			label: "我发出的",
			children: (
				<div style={{ width: 1000 }}>
					<Table
						columns={toMeColumns}
						dataSource={send}
						rowKey={(item) => item.id}
						style={{ width: "1000px" }}
					/>
				</div>
			),
		},
		{
			key: "2",
			label: "发给我的",
			children: (
				<div style={{ width: 1000 }}>
					<Table
						columns={fromMeColumns}
						dataSource={accept}
						rowKey={(item) => item.id}
						style={{ width: "1000px" }}
					/>
				</div>
			),
		},
	];

	return (
		<div id="notification-container">
			<div className="notification-list">
				<Tabs defaultActiveKey="1" items={items} onChange={onChange} />
			</div>
		</div>
	);
}
